import React, { useRef, useState, useMemo } from 'react'
import BasicDemo from '../BasicDemo';
import { FloatButton, message } from 'antd'
import './index.scss'
import { EnterOutlined } from '@ant-design/icons';
import BraftEditor from 'braft-editor';
import socket from '../../utils/io';



let str: string = ''
export default function EditChat() {
  const [content, setContent] = useState('')
  const inputRef = useRef<BasicDemo>(null)

  const emit = () => {
    const reg = /^<p>(.*?)<\/p>$/g
    let contentText = content.match(reg)?.map(str => str.replace(/<p>/, '').replace(/<\/p>/, ''))[0].trim();

    if (contentText?.length == 0) {
      message.warning('输入内容不能为空')
    } else {
      socket.emit('self send message', { username: window.localStorage.getItem('user'), content })
    }
    setContent('')
    inputRef.current?.setState((state: any) => {
      return {
        editorState: BraftEditor.createEditorState(''),
        outputHTML: '<p></p>',
        outputText: ''
      }
    })
  }


  return (
    <div className='EditChat'>
      <FloatButton onClick={emit} icon={<EnterOutlined />} type="primary" className='enter' />
      <BasicDemo
        ref={inputRef}
        disabled={false}
        onChange={(HTML: string, text: string) => {
          setContent(HTML);
        }}
        onEnter={(HTML: string, text: string) => {
          setContent(HTML);
          emit()
        }}
      ></BasicDemo>
    </div >
  )
}
